import { Radio } from 'ant-design-vue'
import type { AdvKey, ComponentsConfigRaw } from '../../../types'
import { simpleGlobal } from '../globals'
import { commonGlobalFields } from '../simples'

const advsConfig: ComponentsConfigRaw = {
  swiperAdv: {
    sort: 8,
    type: 'adv',
    icon: 'adv_carousel',
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '外框样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: true,
          props: {},
          slots: {
            default: () => {
              return (
                <>
                  <Radio value={1}>
                    <div class="w-8 h-8 border border-solid border-gray-400">1</div>
                  </Radio>
                  <Radio value={2}>
                    <div class="w-8 h-8 border border-solid border-gray-400">2</div>
                  </Radio>
                  <Radio value={3}>
                    <div class="w-8 h-8 border border-solid border-gray-400">3</div>
                  </Radio>
                </>
              )
            }
          }
        }
      },
      {
        tag: 'form-item',
        props: {
          label: '外框圆角',
          class: 'px-4'
        },
        child: {
          tag: 'slider'
        }
      },
      {
        tag: 'form-item',
        props: {
          label: '广告高度',
          class: 'px-4'
        },
        child: { tag: 'input-number' }
      },
      {
        tag: 'form-item',
        props: {
          label: '滚动间隔',
          class: 'px-4'
        },
        child: {
          tag: 'select',
          props: {
            placeholder: '请选择',
            options: [
              { value: 8, label: '3000ms' },
              { value: 10, label: '3500ms' },
              { value: 12, label: '4000ms' },
              { value: 14, label: '4500ms' },
              { value: 18, label: '5000ms' }
            ]
          }
        }
      },
      {
        tag: 'form-item',
        props: {
          label: '广告标签',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: true,
          props: {},
          slots: {
            default: () => {
              return (
                <>
                  <Radio value={1}>
                    <div class="w-8 h-8 border border-solid border-gray-400">1</div>
                  </Radio>
                  <Radio value={2}>
                    <div class="w-8 h-8 border border-solid border-gray-400">2</div>
                  </Radio>
                  <Radio value={3}>
                    <div class="w-8 h-8 border border-solid border-gray-400">3</div>
                  </Radio>
                </>
              )
            }
          }
        }
      }
    ]
  },
  bannerAdv: {
    sort: 9,
    type: 'adv',
    icon: 'adv_banner',
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '外框样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '外框圆角',
          class: 'px-4'
        },
        child: {
          tag: 'slider'
        }
      },
      {
        tag: 'form-item',
        props: {
          label: '广告高度',
          class: 'px-4'
        },
        child: { tag: 'input-number' }
      }
    ]
  },
  dialogAdv: {
    sort: 10,
    type: 'adv',
    icon: 'adv_popup',
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '外框样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '外框圆角',
          class: 'px-4'
        },
        child: {
          tag: 'slider'
        }
      },
      {
        tag: 'form-item',
        props: {
          label: '广告高度',
          class: 'px-4'
        },
        child: { tag: 'input-number' }
      }
    ]
  },
  bottomFloatAdv: {
    sort: 11,
    icon: 'adv_floatingLayer',
    type: 'adv',
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '外框样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '外框圆角',
          class: 'px-4'
        },
        child: {
          tag: 'slider'
        }
      },
      {
        tag: 'form-item',
        props: {
          label: '广告高度',
          class: 'px-4'
        },
        child: { tag: 'input-number' }
      }
    ]
  },
  playerBeforeAdv: {
    sort: 12,
    icon: 'adv_beforePlaying',
    type: 'adv',
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '外框样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '广告显示秒数',
          class: 'px-4'
        },
        child: { tag: 'input-number' }
      }
    ]
  },
  playerPauseAdv: {
    sort: 13,
    icon: 'adv_suspend',
    type: 'adv',
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '外框样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '外框圆角',
          class: 'px-4'
        },
        child: {
          tag: 'slider'
        }
      },
      {
        tag: 'form-item',
        props: {
          label: '广告高度',
          class: 'px-4'
        },
        child: { tag: 'input-number' }
      }
    ]
  }
}

export default (keys: AdvKey[] = []) => {
  if (!keys?.length) return advsConfig
  const res: ComponentsConfigRaw = {}
  for (const key in advsConfig) {
    res[key] = { ...advsConfig[key], disabled: keys.includes(key as AdvKey) }
  }
  return res
}
